<template>
  <div class="body">
    <el-container>
      <el-header>
        <!-- 头部 -->
        <home-header />
      </el-header>

      <el-container>
        <!-- 侧边栏 -->
        <home-aside @currentTitle="currentTitle" />
        <el-main>
          <!-- 头部导航栏/面包屑 -->
          <div id="header_nav">
            <!-- <i class="el-icon-star-on"></i> -->
            <img :src="getMenuIcon(iconImg)" class="headerIcon" />
            <template v-if="dataSearchDetailTitleStatus">
              <span>{{ dataSearchDetailTitle[0] }}</span>
              <span id="middleText">{{ dataSearchDetailTitle[1] }}</span>
              <span>{{ dataSearchDetailTitle[2] }}</span>
            </template>
            <template v-else>
              {{ fullTitle }}
            </template>
          </div>
          <!-- 后台内容区域 -->
          <el-scrollbar style="height: calc(100vh - 125px)">
            <section class="main_section">
              <router-view></router-view>
            </section>
          </el-scrollbar>
        </el-main>
      </el-container>
    </el-container>
    <el-badge is-dot class="badgeItem" v-show="badgeStatus"> </el-badge>
    <el-button
      class="small-msg"
      type="primary"
      icon="el-icon-message"
      v-show="isSmall"
      @click="changeSize"
    ></el-button>

    <cs-popup
      v-show="!isSmall"
      :black-data="newblackMsg"
      @closeBtnClick="closeBtnClick"
      @small-click="changeSize"
      v-if="isShowPopup"
    />
  </div>
</template>

<script>
import homeHeader from './cpns/homeHeader.vue'
import homeAside from './cpns/homeAside.vue'
import csPopup from '../../components/cs-popup/cs-popup.vue'
import { mapActions, mapState } from 'vuex'

export default {
  components: {
    homeHeader,
    homeAside,
    csPopup
  },
  data() {
    return {
      fullTitle: '',
      iconImg: '',
      dataSearchDetailTitle: [],
      dataSearchDetailTitleStatus: false,
      isShowPopup: false,
      newOverloadMsg: {},
      newblackMsg: {},
      isSmall: false,
      badgeStatus: false
    }
  },
  created() {
    // 获取运营检测-数据查询-详情页标题
    this.$bus.$on('changeTitle', (res) => {
      this.dataSearchDetailTitle = res.split('$')
      this.dataSearchDetailTitleStatus = true
    })
    this.$bus.$on('changeTitleStatus', (status) => {
      this.dataSearchDetailTitleStatus = status
    })
    this.WEBSOCKET_INIT()
  },
  mounted() {
    // setInterval(() => {
    //   console.log(this.eventlist)
    // }, 3000)
  },
  beforeDestroy() {},
  computed: {
    ...mapState('m_msg', ['overloadMsg', 'blackMsg'])
  },
  watch: {
    blackMsg(newVal) {
      this.newblackMsg = newVal
      this.isShowPopup = true
      if (this.isSmall) {
        this.badgeStatus = true
      }
    }
  },
  methods: {
    ...mapActions('m_msg', ['WEBSOCKET_INIT']),
    currentTitle(fullTitle, iconImg) {
      this.fullTitle = fullTitle
      this.iconImg = iconImg
    },
    getMenuIcon() {
      // 使用require引用图片
      // 这里需要判断this.iconImg是否为空，否则require函数会报错
      // 因为该方法是动态绑定到图片标签中，当页面开始加载是，img标签优先调用该方法
      // 此时还没有拿到图片名称，所以调用就报错
      if (this.iconImg) {
        return require('../../assets/icon/' + this.iconImg)
      }
    },
    closeBtnClick() {
      this.isShowPopup = false
    },
    changeSize(e) {
      this.isSmall = !this.isSmall
      this.badgeStatus = false
    }
  }
}
</script>

<style scoped>
.el-header {
  background-color: #262e3e;
  padding: 0;
}

.el-main {
  padding: 0;
  background-color: #f2f2f2;
}

#header_nav {
  height: 62px;
  line-height: 62px;
  background-color: #fff;
  font-size: 20px;
  font-weight: 700;
  padding-left: 26px;
  border-bottom: 1px solid #dddddd;
}

#header_nav i {
  font-size: 24px;
}

.main_section {
  padding: 24px 26px 24px 26px;
  box-sizing: border-box;
}

/* 运营监测-数据查询-详情页中间文字样式 */
#middleText {
  color: #006eff;
}

.headerIcon {
  width: 24px;
  height: 24px;
  vertical-align: text-bottom;
}

.small-msg {
  position: fixed;
  right: 0;
  bottom: 100px;
  z-index: 99;
}

::v-deep .el-scrollbar__wrap {
  overflow-x: visible;
}

.badgeItem {
  /* margin-top: 10px;
  margin-right: 40px; */
  position: fixed;
  right: 50px;
  bottom: 124px;
  z-index: 101;
}

.badgeItem >>> .el-badge__content.is-dot {
  width: 10px;
  height: 10px;
}
</style>
